<template>
	<view class="wrap">
		<view class="box" v-for="(item,index) in list">
			<text>{{item.express_name}}：</text>
			<text>{{item.express_no}}</text>
			<u-button style="margin-left: 20rpx;" size="mini" @click="getGxpress(item.express_no,item.express_name)">物流信息</u-button>
		</view>
		<!-- <view class="box">
			<empty v-if="isEmpty" :emptyImg="emptyImg" :emptyTxt="emptyTxt"></empty>
			<u-time-line v-else>
				<u-time-line-item nodeTop="2" v-for="(item, index) in info.Traces">
					<template v-slot:node>
						<view class="u-node" style="background: #20cbd4;">
							<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
						</view>
					</template>
					<template v-slot:content>
						<view>
							<view v-if="index>0" class="u-order-title"></view>
							<view v-else class="u-order-title1"></view>
							<view class="u-order-desc">{{item.AcceptTime}}</view>
							<view class="u-order-time">{{item.AcceptStation}}</view>
						</view>
					</template>
				</u-time-line-item>
			</u-time-line>
		</view> -->
		<u-popup v-model="modalShow"  mode="center" border-radius="14" width="80%" height="80%" closeable="true">
		   <view class="box">
		    <empty v-if="isEmpty" :emptyImg="emptyImg" :emptyTxt="emptyTxt"></empty>
		    <u-time-line v-else>
		     <u-time-line-item nodeTop="2" v-for="(item, index) in expressList">
		      <template v-slot:node>
		       <view class="u-node" style="background: #20cbd4;">
		        <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
		       </view>
		      </template>
		      <template v-slot:content>
		       <view>
		        <view v-if="index>0" class="u-order-title"></view>
		        <view v-else class="u-order-title1"></view>
		        <view class="u-order-desc">{{item.AcceptTime}}</view>
		        <view class="u-order-time">{{item.AcceptStation}}</view>
		       </view>
		      </template>
		     </u-time-line-item>
		    </u-time-line>
		   </view>
		  </u-popup>
		<login-model ref="loginModel"></login-model>
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import loginModel from "@/components/public/loginModel.vue";
	import empty from "@/components/public/empty.vue";
	import {orderExpress,exchangeExpress,sharingExpress,timeLimitedExpress,getExpress} from "@/common/api.js";
	export default {
		components: {
			empty,
			loginModel,
			hoverMenu
		},
		data() {
			return {
				info:{},
				isEmpty:false,
				emptyImg:getApp().globalData.imageUrl+"empty_goods.png",
				emptyTxt:"暂无物流详细信息～",
				list:[],
				modalShow:false,
				order_id:"",
				expressList:[]
			}
		},
		onLoad: function(option) {
			//0正常订单1拼团订单2秒杀订单
			this.order_id = option.order_id
			if(option.type == 0){
				orderExpress(this,{order_id:option.order_id})
			}else if(option.type == 1){
				exchangeExpress(this,{order_id:option.order_id})
			}else{
				timeLimitedExpress(this,{order_id:option.order_id})
			}
			
		},
		methods:{
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			getGxpress(express_no,express_name){
				getExpress(this,{order_id:this.order_id,express_no:express_no,express_name:express_name})
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.wrap {
		padding: 24rpx 24rpx 24rpx 40rpx;
	}
	
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}
	
	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-title.unacive {
		color: rgb(150, 150, 150);
	}
	
	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}
	
	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
	.u-order-title1 {
		color: #000000;
		font-weight: bold;
		font-size: 32rpx;
	}
	
	.u-order-title1.unacive {
		color: #000000;
	}
	
	
	.tel {
		color: $u-type-primary;
	}
	.box{
		margin:0 20rpx 20rpx;
		border-radius: 10rpx;
		padding: 20rpx 40rpx;
		background-color: #fff;
	}
</style>
